<template>
  <div class="header-container">
    <div class="l-container">
    <!--面包屑-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.menuPath" :to="{ path: item.menuPath }">{{ item.menuName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="r-container">
        <el-menu mode="horizontal" :ellipsis="false" :router="true">
          <el-menu-item index="1">
            <el-tooltip
                effect="light"
                content="收件箱"
                placement="bottom"
            >
              <el-icon><el-badge is-dot><Bell /></el-badge></el-icon>
            </el-tooltip>
          </el-menu-item>
          <el-sub-menu index="2" style="display: flex; justify-content: flex-end; ">
            <template #title>
              <!--头像-->
              <el-avatar v-if="userInfo.avatar" :src='"https://seedling-classmate.oss-cn-beijing.aliyuncs.com/"+userInfo.avatar' size="small"></el-avatar>
              <el-avatar v-else size="small" class="avatar-box"></el-avatar>
              <div style="margin-left: 15px">
                <span style="color: var(--el-text-color-regular)">{{ userInfo.name }}</span>
              </div>
            </template>
            <el-menu-item index="/person" @click="person">
              <el-icon><User /></el-icon>个人中心
            </el-menu-item>
            <el-menu-item v-if="userInfo.roleId == 4" @click="myWallet">
              <el-icon><Wallet /></el-icon>我的钱包
            </el-menu-item>
            <el-menu-item @click="logout" index="2-1">
              <el-icon><SwitchButton /></el-icon>登出
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
    </div>
  </div>

</template>

<script>

import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Bell, SwitchButton, User} from "@element-plus/icons-vue";
export default {
  name: "H" +
      "header",
  components: {Bell, SwitchButton, User},
  data() {
    return {
      tags: [],
      picRouter: '',
      userInfo:{}
    }
  },
  created() {
    this.getTags();
    this.getUserInfo()
    /*this.getName()
    this.showHeadPic()*/
  },
  methods: {
    logout() {
      this.axios.post('/userLoginController/logout').then(res => {
        if(res.data.code === 200) {
            window.sessionStorage.clear()
            console.log('登出成功')
            router.push('/LoginPage')
        }
        else {
          ElMessage.warning('error')
        }
      })
    },
    getUserInfo() {
      this.axios.post('/userLoginController/getUserInfo').then(res => {
        if(res.status === 200) {
          this.userInfo=res.data.data;
          console.log("获取用户信息：",this.userInfo)
        }
        else {
          ElMessage.warning('error')
        }
      })
    },
    /*获取store中的tabsList*/
    getTags() {
      this.tags = this.$store.state.tabsList
    },

    clickMenu(item) {
      this.$store.commit('selectMenu',item)
    },
    person(){
      this.$router.push({path:'/advertiser/person',query:{userId:this.userInfo.userId}})
    },
    myWallet(){
      this.$router.push({path:'/advertiser/myWallet',query:{userId:this.userInfo.userId}})
    },
  },
  mounted() {

  }
}
</script>

<style scoped>
.header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar-box {
  background: url("@/assets/defaultAvatar.png") no-repeat;
  background-size: 25px 25px;
}
</style>
